<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap_limitless.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/layout.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/components.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script src="assets/js/main/jquery.min.js"></script>
	<script src="assets/js/main/bootstrap.bundle.min.js"></script>
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script src="assets/js/plugins/prism.min.js"></script>
	<script src="assets/js/plugins/sticky.min.js"></script>
	
	<script src="assets/js/main/app.js"></script>
	<script src="assets/js/pages/components_scrollspy.js"></script>
	<!-- /theme JS files -->

</head>

<body data-spy="scroll" data-target=".sidebar-component-right">

	<!-- Main navbar -->
	<div class="navbar navbar-expand-md navbar-light">
		<div class="navbar-header navbar-dark d-none d-md-flex align-items-md-center">
			<div class="navbar-brand navbar-brand-md">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_light.png" alt="">
				</a>
			</div>
	
			<div class="navbar-brand navbar-brand-xs">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_icon_light.png" alt="">
				</a>
			</div>
		</div>

		<div class="d-flex flex-1 d-md-none">
			<div class="navbar-brand mr-auto">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_dark.png" alt="">
				</a>
			</div>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
				<i class="icon-tree5"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-main-toggle" type="button">
				<i class="icon-paragraph-justify3"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-component-toggle" type="button">
				<i class="icon-unfold"></i>
			</button>
		</div>

		<div class="collapse navbar-collapse" id="navbar-mobile">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-main-hide d-none d-md-block">
						<i class="icon-paragraph-justify3"></i>
					</a>
				</li>

				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-component-toggle d-none d-md-block">
						<i class="icon-transmission"></i>
					</a>
				</li>
			</ul>

			<ul class="navbar-nav ml-md-auto">
				<li class="nav-item dropdown">
					<a href="#" class="navbar-nav-link">
						<i class="icon-history mr-2"></i>
						Changelog
						<span class="badge bg-warning-400 badge-pill position-static ml-md-2">2.0</span>
					</a>					
				</li>
			</ul>
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Page content -->
	<div class="page-content">

		<!-- Main sidebar -->
		<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">

			<!-- Sidebar mobile toggler -->
			<div class="sidebar-mobile-toggler text-center">
				<a href="#" class="sidebar-mobile-main-toggle">
					<i class="icon-arrow-left8"></i>
				</a>
				Navigation
				<a href="#" class="sidebar-mobile-expand">
					<i class="icon-screen-full"></i>
					<i class="icon-screen-normal"></i>
				</a>
			</div>
			<!-- /sidebar mobile toggler -->


			<!-- Sidebar content -->
			<div class="sidebar-content">

        		<!-- Support -->
				<div class="card card-body">
					<a href="http://kopyov.ticksy.com" class="btn bg-success-400 btn-block" target="_blank"><i class="icon-lifebuoy mr-2"></i> Limitless support</a>
				</div>
				<!-- /support -->


				<!-- Main navigation -->
				<div class="card card-sidebar-mobile">
					<ul class="nav nav-sidebar" data-nav-type="accordion">
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Main</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="index.html" class="nav-link">Introduction</a></li>
						<li class="nav-item"><a href="main_getting_started.html" class="nav-link">Getting started</a></li>
						<li class="nav-item"><a href="main_starter_kit.html" class="nav-link">Starter kit</a></li>
						<li class="nav-item"><a href="main_rtl.html" class="nav-link">RTL layout</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Basic functionality</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="base_scss_css.html" class="nav-link">SCSS and CSS</a></li>
						<li class="nav-item"><a href="base_scss_compile.html" class="nav-link">Compiling SCSS</a></li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link">Plugins</a>
							<ul class="nav nav-group-sub" data-submenu-title="Plugins">
								<li class="nav-item"><a href="plugins_forms.html" class="nav-link">Forms</a></li>
								<li class="nav-item"><a href="plugins_forms_styling.html" class="nav-link">Form styling</a></li>
								<li class="nav-item"><a href="plugins_editors.html" class="nav-link">Editors</a></li>
								<li class="nav-item"><a href="plugins_uploaders.html" class="nav-link">Uploaders</a></li>
								<li class="nav-item"><a href="plugins_extensions.html" class="nav-link">Extensions</a></li>
								<li class="nav-item"><a href="plugins_notifications.html" class="nav-link">Notifications</a></li>
								<li class="nav-item"><a href="plugins_pickers.html" class="nav-link">Pickers</a></li>
								<li class="nav-item"><a href="plugins_tables.html" class="nav-link">Tables</a></li>
								<li class="nav-item"><a href="plugins_ui.html" class="nav-link">UI</a></li>
								<li class="nav-item"><a href="plugins_vis.html" class="nav-link">Visualization</a></li>
							</ul>
						</li>

						<li class="nav-item"><a href="base_bootstrap.html" class="nav-link">Bootstrap</a></li>
						<li class="nav-item"><a href="base_color_system.html" class="nav-link">Color system</a></li>
						<li class="nav-item"><a href="base_helpers.html" class="nav-link">Helpers</a></li>
						<li class="nav-item"><a href="base_themes.html" class="nav-link">Themes</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Layout options</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="layout_overview.html" class="nav-link">Layouts</a></li>
						<li class="nav-item"><a href="layout_sidebars.html" class="nav-link">Sidebars</a></li>
						<li class="nav-item"><a href="layout_navbars.html" class="nav-link">Navbars</a></li>
						<li class="nav-item"><a href="layout_v_nav.html" class="nav-link">Vertical navigation</a></li>
						<li class="nav-item"><a href="layout_h_nav.html" class="nav-link">Horizontal navigation</a></li>
						<li class="nav-item"><a href="layout_page_header.html" class="nav-link active">Page header</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Other</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="other_credits.html" class="nav-link">Sources and credits</a></li>
						<li class="nav-item"><a href="other_changelog.html" class="nav-link">Changelog <span class="badge badge-pill bg-warning-400 ml-auto">version 2.0</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /main navigation -->

		</div>
		<!-- /main sidebar -->


		<!-- Main content -->
		<div class="content-wrapper">

			<!-- Page header -->
			<div class="page-header">
				<div class="page-header-content header-elements-md-inline">
					<div class="page-title d-flex">
						<h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Limitless</span> - Page Header</h4>
						<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
					</div>

					<div class="header-elements d-none py-0 mb-3 mb-md-0">
						<div class="breadcrumb">
							<a href="index.html" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Home</a>
							<span class="breadcrumb-item active">Page header</span>
						</div>
					</div>
				</div>
			</div>
			<!-- /page header -->
			

			<!-- Content area -->
			<div class="content pt-0">

				<!-- Inner container -->
				<div class="d-flex align-items-start flex-column flex-md-row">

					<!-- Left content -->
					<div class="order-2 order-md-1">

							<!-- Page header -->
							<div class="card" id="page_header">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Page header component</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									<div class="mb-4" id="page_header_overview">
										<p>Page header - component that displays page title and optional custom components. Depending on the layout variation, page header can have transparent, white, dark, custom light and dark colors. By default, page header supports title with or without icon, subtitle and optional components that appear on the right side of the header area.</p>

										<p class="mb-3">All optional components are available in both card header and page header components and use same markup, all of them are adapted to any height of the headers and always vertically centered. Mobile layout varies: visible inline, visible stacked, hidden and collapsible.</p>

										<div class="table-responsive">
											<table class="table table-bordered">
												<thead>
													<tr>
														<th style="width: 250px;">Component</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="font-weight-semibold">Buttons</td>
														<td>All button options, including floating buttons</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Button dropdowns</td>
														<td>Button dropdowns with all available options</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Labeled buttons</td>
														<td>Transparent buttons with icon and text label</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Outlined buttons</td>
														<td>Transparent buttons with custom border and text colors</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Input fields</td>
														<td>All available input fields with options</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Input groups</td>
														<td>Input groups with all available options</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Checkboxes, radios</td>
														<td>Unstyled, styles, switchery toggles and Bootstrap switches</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Selects</td>
														<td>Default, styled, Select2, Bootstrap multiselect and custom BS selects</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">File input</td>
														<td>Single file input, styled and unstyled</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Tabs</td>
														<td>Tabs nav, available in panel header only</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Pills</td>
														<td>Pills nav, available in panel header only</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Text, links</td>
														<td>Text with links, all possible options</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Badges</td>
														<td>Badges and badge pills in all variations</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Icons</td>
														<td>Single and multiple icons list</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Pagination</td>
														<td>Pagination and pager components in 3 sizes</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Date picker</td>
														<td>Date range picker attached to the button and with custom display format</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="mb-4" id="page_header_markup">
										<h6 class="font-weight-semibold">Page header markup</h6>
										<p>Page header markup is identical in all layouts, but in some layouts default page header classes can be different. This was made to reduce number of classes in markup if default page header style is different. Default page header markup is:</p>
										<pre class="language-markup"><code>&lt;!-- Page header -->
&lt;div class="page-header page-header-light">

	&lt;!-- Page header content -->
	&lt;div class="page-header-content header-elements-md-inline">

		&lt;!-- Page title -->
		&lt;div class="page-title">
			&lt;h4>&lt;i class="icon-arrow-left52 mr-2">&lt;/i> Page Title&lt;/h4>
		&lt;/div>
		&lt;!-- /page title -->


		&lt;!-- Header elements -->
		&lt;div class="header-elements">
			...
		&lt;/div>
		&lt;!-- /header elements -->

	&lt;/div>
	&lt;!-- /page header content -->

&lt;/div>
&lt;!-- /page header -->
</code></pre>
									</div>

									<div id="page_header_elements">
										<h6 class="font-weight-semibold">Page header elements</h6>
										<p class="mb-3">The table above demonstrates what components can be ised in page header area. All these components are completely optional. All components are hidden on mobiles and tablets and can be reached by clicking toggle button on the right side of the header area, all components are displayed as block elements and appear below the page header. In future releases header components list will be extended with new components according to the functionality additions.</p>

										<p class="font-weight-semibold">Example of page header components:</p>
										<pre class="language-markup" data-line="10,16"><code>&lt;!-- Page header -->
&lt;div class="page-header page-header-light">

	&lt;!-- Header content -->
	&lt;div class="page-header-content header-elements-md-inline">

		&lt;!-- Header title -->
		&lt;div class="page-title d-flex">
			&lt;h4>&lt;i class="icon-arrow-left52 mr-2">&lt;/i> Page title&lt;/h4>
			&lt;a href="#" class="header-elements-toggle text-default d-md-none">&lt;i class="icon-more">&lt;/i>&lt;/a>
		&lt;/div>
		&lt;!-- /header title -->


		&lt;!-- Header elements -->
		&lt;div class="header-elements d-none">
			&lt;div class="d-flex justify-content-center">
				&lt;a href="#" class="btn btn-link btn-float text-default">
					&lt;i class="icon-bars-alt text-primary">&lt;/i>
					&lt;span>Statistics&lt;/span>
				&lt;/a>
				&lt;a href="#" class="btn btn-link btn-float text-default">
					&lt;i class="icon-calculator text-primary">&lt;/i>
					&lt;span>Invoices&lt;/span>
				&lt;/a>
				&lt;a href="#" class="btn btn-link btn-float text-default">
					&lt;i class="icon-calendar5 text-primary">&lt;/i>
					&lt;span>Schedule&lt;/span>
				&lt;/a>
			&lt;/div>
		&lt;/div>
		&lt;!-- /header elements -->

	&lt;/div>
	&lt;!-- /header content -->

&lt;/div>
&lt;!-- /page header -->
</code></pre>
									</div>
								</div>
							</div>
							<!-- /page header -->


							<!-- Breadcrumbs -->
							<div class="card" id="breadcrumb">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Breadcrumb component</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									<div class="mb-4" id="breadcrumb_line">
										<h6 class="font-weight-semibold">Breadcrumb line component</h6>
										<p class="mb-3">By default, breadcrumbs component is placed inside custom <code>&lt;div class="breadcrumb-line" /></code> container. This container has a lot of different options, such as different placement, background and border color options, optional components etc. Similar to page header component, all breadcrumb line elements can have one of the following mobile options: visible inline, visible stacked, hidden and collapsible.</p>

										<p class="font-weight-semibold">Breadcrumb line markup:</p>
										<pre class="language-markup"><code>&lt;!-- Breadcrumb line component -->
&lt;div class="breadcrumb-line breadcrumb-line-light header-elements-inline">

	&lt;!-- Breadrcumb -->
	&lt;div class="breadcrumb">
		...
	&lt;/div>
	&lt;!-- /breadcrumb -->


	&lt;!-- Header elements -->
	&lt;div class="header-elements">
		...
	&lt;/div>
	&lt;!-- /header elements -->

&lt;/div>
&lt;!-- /breadcrumb line component -->
</code></pre>
									</div>

									<div id="breadcrumb_base">
										<h6 class="font-weight-semibold">Breadcrumb component</h6>
										<p class="mb-3">Limitless template allows you to use breadcrumb as a stand alone component or as a part of <strong>breadcrumb line</strong> component. Breadcrumb component can be used above and below page title, above and below page header content or as a page header element displayed on the right side. Breadcrumb itself supports a lot of customization options and placements, depending on layout.</p>

										<p class="font-weight-semibold">Example markup:</p>
										<pre class="language-markup" data-line="6"><code>&lt;!-- Breadcrumb component -->
&lt;div class="breadcrumb">
	&lt;a href="#" class="breadcrumb-item">Home&lt;/a>
	&lt;a href="#" class="breadcrumb-item">Parent&lt;/a>
	&lt;span class="breadcrumb-item active">Active location&lt;/span>
&lt;/div>
&lt;!-- /breadcrumb component -->
</code></pre>
									</div>
								</div>
							</div>
							<!-- /breadcrumbs -->

					</div>
					<!-- /left content -->


					<!-- Right sidebar component -->
					<div class="sidebar-sticky w-100 w-md-auto order-1 order-md-2">
						<div class="sidebar sidebar-light sidebar-component sidebar-component-right sidebar-expand-md mb-3">
							<div class="sidebar-content">
								<div class="card">
									<div class="card-header bg-transparent header-elements-inline">
										<span class="text-uppercase font-size-sm font-weight-semibold">Page navigation</span>
										<div class="header-elements">
											<div class="list-icons">
						                		<a class="list-icons-item" data-action="collapse"></a>
					                		</div>
				                		</div>
									</div>

									<div class="card-body">
										<a href="http://themeforest.net/user/kopyov" class="btn bg-blue btn-block" target="_blank"><i class="icon-reading mr-2"></i> Contact author</a>
									</div>

									<ul class="nav nav-sidebar nav-scrollspy" data-nav-type="accordion">
										<li class="nav-item-header pt-0"><div class="text-uppercase font-size-xs line-height-xs">Sections</div> <i class="icon-menu"></i></li>
										<li class="nav-item nav-item-submenu">
											<a href="#page_header" class="nav-link">Page header</a>
											<ul class="nav nav-group-sub d-block">
												<li class="nav-item"><a href="#page_header_overview" class="nav-link">Overview</a></li>
												<li class="nav-item"><a href="#page_header_markup" class="nav-link">Page header markup</a></li>
												<li class="nav-item"><a href="#page_header_elements" class="nav-link">Page header elements</a></li>
											</ul>
										</li>
										<li class="nav-item nav-item-submenu">
											<a href="#breadcrumb" class="nav-link">Breadcrumbs</a>
											<ul class="nav nav-group-sub d-block">
												<li class="nav-item"><a href="#breadcrumb_line" class="nav-link">Breadcrumb line component</a></li>
												<li class="nav-item"><a href="#breadcrumb_base" class="nav-link">Breadcrumb component</a></li>
											</ul>
										</li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="#" class="nav-link">Go to top <i class="icon-circle-up2 mr-0 ml-auto"></i></a></li>
									</ul>
								</div>
				            </div>
						</div>
					</div>
					<!-- /right sidebar component -->

				</div>
				<!-- /inner container -->

			</div>
			<!-- /content area -->


			<!-- Footer -->
			<div class="navbar navbar-expand-lg navbar-light">
				<div class="text-center d-lg-none w-100">
					<button type="button" class="navbar-toggler dropdown-toggle" data-toggle="collapse" data-target="#navbar-footer">
						<i class="icon-unfold mr-2"></i>
						Footer
					</button>
				</div>

				<div class="navbar-collapse collapse" id="navbar-footer">
					<span class="navbar-text">
						&copy; 2015 - 2018. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
					</span>

					<ul class="navbar-nav ml-lg-auto">
						<li class="nav-item"><a href="https://themeforest.net/item/limitless-responsive-web-application-kit/13080328?ref=kopyov" class="navbar-nav-link font-weight-semibold"><span class="text-pink-400"><i class="icon-cart2 mr-2"></i> Purchase</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /footer -->

		</div>
		<!-- /main content -->

	</div>
	<!-- /page content -->

</body>
</html>
